<template>
  <div class="CurrentEnergyConsum">
    <div class="EnergyConsumImg"></div>
    <div class="CurrentEnergycontent">
      <div class="currentEnergyInfoImg">
        <div class="statisticsFilter">
          <div class="select-floor">
            <el-popover placement="bottom" trigger="click" style="min-width: 64px;width: 64px;">
              <div v-for="item in systems">
                <el-button @click.native="typeChange(item.label)" size="mini" style="width: 56px; margin-bottom: 5px">{{ item.label }}</el-button>
              </div>
              <div slot="reference" class="lcc">
                <span>楼层选择:</span>
                <span class="lc"></span>
              </div>
            </el-popover>
          </div>
          <!--<el-select-->
          <!--  v-model="selectedSys"-->
          <!--  @change="typeChange"-->
          <!--  style="width: 100%"-->
          <!--&gt;-->
          <!--  <el-option-->
          <!--    v-for="item in systems"-->
          <!--    :label="item.label"-->
          <!--    :value="item.value"-->
          <!--    :key="item.value"-->
          <!--  ></el-option>-->
          <!--</el-select>-->
        </div>
      </div>
      <!-- 各种类资源消耗统计 -->
      <el-row>
        <el-col :span="8">
          <img
            class="imgItem"
            src="../../../../../static/images/energy/耗电量.png"
          />
          <div class="consumTypes">
            <div class="type">日耗电量</div>
            <div>
              <span class="count">{{ dayelectricConsum }}</span>
              <span class="unit">度</span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <img
            class="imgItem"
            src="../../../../../static/images/energy/耗水量.png"
          />
          <div class="consumTypes">
            <div class="type">月耗电量</div>
            <div>
              <span class="count">{{ monthelectricConsum }}</span>
              <span class="unit">度</span>
            </div>
          </div>
        </el-col
        >
        <el-col :span="8">
          <img
            class="imgItem"
            src="../../../../../static/images/energy/耗气量.png"
          />
          <div class="consumTypes">
            <div class="type">年耗电量</div>
            <div>
              <span class="count">{{ yearelectricConsum }}</span>
              <span class="unit">度</span>
            </div>
          </div>
        </el-col
        >
      </el-row>
      <!-- 各种类资源消耗趋势 -->
      <div class="charTitle">
        <div class="leftImg"></div>
        <div class="titleText">日耗电量</div>
        <div class="rightImg"></div>
      </div>
      <div id="electricChart"></div>
      <div class="charTitle" style="margin-top: 100px;">
        <div class="leftImg"></div>
        <div class="titleText">月耗电量</div>
        <div class="rightImg"></div>
      </div>
      <div id="waterChart"></div>
      <div class="charTitle" style="margin-top: 100px;">
        <div class="leftImg"></div>
        <div class="titleText">年耗电量</div>
        <div class="rightImg"></div>
      </div>
      <div id="airChart"></div>
    </div>
  </div>
</template>

<script>
import {currentNH, eneryEquipmentQuery} from "../../../../utils/api";

export default {
  data () {
    return {
      // 耗电量 耗水量 耗气量
      dayelectricConsum: 28,
      monthelectricConsum: 31,
      yearelectricConsum: 23,
      selectedSys: "全部",
      systems: [ // 楼层编号
        {
          label: "全部",
          value: "全部",
        },
        {
          label: "1F",
          value: "1F",
        },
        {
          label: "2F",
          value: "2F",
        },
        {
          label: "3F",
          value: "3F",
        },
        {
          label: "4F",
          value: "4F",
        },
        {
          label: "5F",
          value: "5F",
        },
        {
          label: "6F",
          value: "6F",
        },
        {
          label: "B1",
          value: "B1",
        },
        {
          label: "B2",
          value: "B2",
        },
      ],
      // 日电量统计
      dayelectricData: {
        data: [],
        usage: [],
      },
      // 月电量统计
      monthelectricData: {
        data: [],
        usage: [],
      },
      // 年电量统计
      yearelectricData: {
        data: [],
        usage: [],
      },
      consumData: {
        dayElectric: "88.0",
        monthElectric: "840.0",
        yearElectric: "840.0",
        dayElectricList: [
          {
            data: "2021-07-20 04",
            usage: "13.0",
          },
          {
            data: "2021-07-20 09",
            usage: "19.0",
          },
          {
            data: "2021-07-20 20",
            usage: "25.0",
          },
          {
            data: "2021-07-20 21",
            usage: "31.0",
          },
        ],
        monthElectricList: [
          {
            data: "2021-07-06",
            usage: "11.0",
          },
          {
            data: "2021-07-10",
            usage: "11.0",
          },
          {
            data: "2021-07-12",
            usage: "114.0",
          },
          {
            data: "2021-07-13",
            usage: "88.0",
          },
          {
            data: "2021-07-14",
            usage: "88.0",
          },
          {
            data: "2021-07-15",
            usage: "88.0",
          },
          {
            data: "2021-07-16",
            usage: "88.0",
          },
          {
            data: "2021-07-17",
            usage: "88.0",
          },
          {
            data: "2021-07-18",
            usage: "88.0",
          },
          {
            data: "2021-07-19",
            usage: "88.0",
          },
          {
            data: "2021-07-20",
            usage: "88.0",
          },
        ],
        yearElectricList: [
          {
            data: "2021-07",
            usage: "840.0",
          },
        ],
      },
      electricChart: null,
      waterChart: null,
      gasChart: null,
    };
  },
  mounted () {
    this.currentEnergy("");
    this.EquipmentQuery();
    this.initElectricCharts();
    this.initWaterCharts();
    this.initAirCharts();
  },
  methods: {
    // 月，日转换
    typeChange (floor) {
      var f = floor;
      if (floor == "全部") {
        f = "";
      }
      this.currentEnergy(f);
      // if(type=="按日统计"){
      //   this.currentEnergy("day");
      // }else if(type=="按日统计"){
      //   this.currentEnergy("month");
      // }else{
      //   this.currentEnergy("year");
      // }
    },
    initElectricCharts () {
      if (this.electricChart !== null) {
        this.electricChart.dispose();
      }
      this.electricChart = this.$echarts.init(
        document.querySelector("#electricChart")
      );
      const option = {
        title: {
          text: "度",
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 24
          },
          left: 65,
          top: 10,
        },
        xAxis: {
          type: "category",
          // type: "time",
          boundaryGap: false,
          interval: 2,
          data: this.dayelectricData.data,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              fontSize: 18
            }
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
          min: 0,
          // max: 50,
          splitNumber: 1,
          axisLabel: {
            textStyle: {
              fontSize: 24
            }
          },
          nameTextStyle: {
            fontSize: 24
          }
        },
        series: [
          {
            data: this.dayelectricData.usage,
            type: "line",
            lineStyle: {
              color: "rgba(0,191,255,1)",
            },
            showSymbol: false,
            smooth: true,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,191,255,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,191,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            }, //区域颜色渐变
          },
        ],
        tooltip: {
          trigger: 'axis',
          triggerOn: "mousemove",
          alwaysShowContent: false,
          textStyle: {
            fontSize: 24
          },
          hideDelay: 0
        },
      };
      this.electricChart.setOption(option);
    },
    initWaterCharts () {
      if (this.waterChart !== null) {
        this.waterChart.dispose();
      }
      this.waterChart = this.$echarts.init(
        document.querySelector("#waterChart")
      );
      const option = {
        tooltip: {
          trigger: 'axis',
          triggerOn: "mousemove",
          alwaysShowContent: false,
          textStyle: {
            fontSize: 30
          },
          hideDelay: 0
        },
        title: {
          text: "度",
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 24
          },
          left: 65,
          top: 10,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 18
            }
          },
          type: "category",
          boundaryGap: false,
          interval: 2,
          data: this.monthelectricData.data,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 24
            }
          },
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
          min: 0,
          // max: 50,
          splitNumber: 1,
        },
        series: [
          {
            data: this.monthelectricData.usage,
            type: "line",
            lineStyle: {
              color: "rgba(218,165,32,1)",
            },
            showSymbol: false,
            smooth: true,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(218,165,32,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(218,165,32,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            }, //区域颜色渐变
          },
        ],
      };
      this.waterChart.setOption(option);
    },
    initAirCharts () {
      if (this.gasChart !== null) {
        this.gasChart.dispose();
      }
      this.gasChart = this.$echarts.init(document.querySelector("#airChart"));
      const option = {
        tooltip: {
          trigger: 'axis',
          triggerOn: "mousemove",
          alwaysShowContent: false,
          textStyle: {
            fontSize: 30
          },
          hideDelay: 0
        },
        title: {
          text: "度",
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 24
          },
          left: 65,
          top: 10,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 18
            }
          },
          type: "category",
          boundaryGap: false,
          interval: 2,
          data: this.yearelectricData.data,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 24
            }
          },
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          splitLine: {
            show: true,
          },
          min: 0,
          // max: 50,
          splitNumber: 1,
        },
        series: [
          {
            data: this.yearelectricData.usage,
            type: "line",
            lineStyle: {
              color: "rgba(106, 56, 197,1)",
            },
            showSymbol: true,
            smooth: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(106, 56, 197,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(106, 56, 197,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            }, //区域颜色渐变
          },
        ],
      };
      this.gasChart.setOption(option);
    },
    // 当前能耗
    currentEnergy (floor) {
      currentNH(floor).then((res) => {
        var consumData = res.data.data || JSON.parse(res.data.data);
        // var consumData = this.consumData;

        if (consumData) {
          this.dayelectricConsum = consumData.dayElectric || 0;
          this.monthelectricConsum = consumData.monthElectric || 0;
          this.yearelectricConsum = consumData.yearElectric || 0;
          this.dayelectricData.data = [];
          this.dayelectricData.usage = [];
          this.monthelectricData.data = [];
          this.monthelectricData.usage = [];
          this.yearelectricData.data = [];
          this.yearelectricData.usage = [];
          consumData.dayElectricList.forEach((item) => {
            this.dayelectricData.data.push(item.data);
            this.dayelectricData.usage.push(item.usage);
          });
          consumData.monthElectricList.forEach((item) => {
            this.monthelectricData.data.push(item.data);
            this.monthelectricData.usage.push(item.usage);
          });
          consumData.yearElectricList.forEach((item) => {
            this.yearelectricData.data.push(item.data);
            this.yearelectricData.usage.push(item.usage);
          });
          this.initElectricCharts();
          this.initWaterCharts();
          this.initAirCharts();
        } else {
          this.dayelectricConsum = 0;
          this.monthelectricConsum = 0;
          this.yearelectricConsum = 0;
          this.dayelectricData.date = [];
          this.dayelectricData.usage = [];
          this.monthelectricData.date = [];
          this.monthelectricData.usage = [];
          this.yearelectricData.date = [];
          this.yearelectricData.usage = [];
          this.initElectricCharts();
          this.initWaterCharts();
          this.initAirCharts();
        }
      });
    },
    // 设备查询
    EquipmentQuery () {
      eneryEquipmentQuery().then((res) => {
      });
    },
  },
  sockets: {
    sendNhglStatus (data) {
      let a = JSON.parse(data);
    },
  },
};
</script>

<style scoped>
.CurrentEnergyConsum {
  width: 100%;
  height: 100%;
}
/* 楼层选择 */
.select-floor {
  position: absolute;
  right: -10px;
  top: -10px;
}
.lcc {
  height: 64px;
  line-height: 64px;
  font-size: 30px;
}
.lc {
  width: 64px;
  height: 64px;
  line-height: 64px;
  display: inline-block;
  background: url("../../../../../static/images/index/lc.png");
  position: absolute;
  cursor: pointer;
}
.lc:hover{
  background: url("../../../../../static/images/index/lc-s.png");
}
.select-floor /deep/ .el-popover {
  min-width: 64px !important;
  width: 64px;
}

.CurrentEnergyConsum .EnergyConsumImg {
  width: 541px;
  height: 114px;
  background: url("../../../../../static/images/energy/能耗统计.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.CurrentEnergycontent {
  width: 100%;
  height: calc(100% - 118px);
}
.currentEnergyInfoImg {
  width: 732px;
  height: 65px;
  background: url("../../../../../static/images/energy/当前能耗.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  position: relative;
}
.statisticsFilter {
  width: 247px;
  height: 40px;
  position: absolute;
  right: 0;
  bottom: 10px;
}
.el-row {
  margin: 40px 0;
  padding: 0 70px;
}

.el-col .imgItem {
  height: 100px;
  vertical-align: top;
}
.el-col .consumTypes {
  /* position: relative;
  top: -115px;
  left: 30px; */
  margin-left: 30px;
  display: inline-block;
}
.consumTypes .type {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #d5ecf3;
  line-height: 25px;
}
.count {
  font-size: 38px;
  font-family: Rockwell Condensed;
  font-weight: 400;
  color: #ffffff;
  line-height: 95px;
}
.unit {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #d5ecf3;
  line-height: 25px;
  margin: 0 15px;
}
.charTitle {
  width: 100%;
  height: 60px;
  display: flex;
}
.leftImg {
  width: 85px;
  height: 20px;
  background: url("../../../../../static/images/energy/二级左.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 220px;
}
.rightImg {
  width: 93px;
  height: 20px;
  background: url("../../../../../static/images/energy/二级右.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 30px;
}
.titleText {
  width: 241px;
  height: 60px;
  font-size: 28px;
  font-family: Source Han Sans SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 60px;
  letter-spacing: 12px;
  margin-left: 40px;
  text-align: center;
}
#electricChart {
  width: 100%;
  height: 400px;
  margin: 10px 0;
}
#waterChart {
  width: 100%;
  height: 400px;
  margin: 10px 0;
}
#airChart {
  width: 100%;
  height: 400px;
  margin: 10px 0;
}
/* 输入框和下拉选的样式调整 */
.el-select /deep/ .el-input__inner {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
  color: white;
  border-radius: 0;
  height: 40px;
  font-size: 30px;
  font-weight: 500;
  padding: 0 30px;
}

.el-select /deep/ .el-select-dropdown {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
}
.el-select /deep/ .el-select-dropdown__item {
  color: white;
  margin: 1px 2px;
}
.el-select
/deep/
.el-select-dropdown.is-multiple
.el-select-dropdown__item.selected {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select /deep/ .el-select-dropdown__item.hover,
.el-select /deep/ .el-select-dropdown__item:hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select
/deep/
.el-select-dropdown.is-multiple
.el-select-dropdown__item.selected.hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(6, 33, 81, 0.67);
}
.el-select /deep/ .el-select-dropdown__list {
  padding: 1px;
}
.el-input /deep/ .el-input__inner {
  height: 40px;
  background-color: rgba(6, 33, 81, 0.67);
  border-radius: 0;
  border: none;
  color: white;
  border: 1px solid #00aeff;
}
</style>

